<template>
    <view class="share-wrap">
        <!-- 分享到好友和朋友圈 -->
        <view class="to-friend" v-if="!showToTimeline">
            <view class="bg" @click="cancel"></view>
            <view class="share-menu">
                <view class="theme">{{ vuex_templateData.name || '春暖花开' }}</view>
                <view class="flex flex-h-around u-p-b-48">
                    <view class="flex flex-column flex-v-center relative" @click="share('toFriend')">
                        <image src="../static/viewWorks/weixin.png" mode="" class="u-p-b-18"></image>
                        <view class="">分享微信好友</view>
                        <button class="share-btn" open-type="share"></button>
                    </view>
                    <view class="flex flex-column flex-v-center relative" @click="share('toTimeline')">
                        <image src="../static/viewWorks/timeline.png" mode="" class="u-p-b-18"></image>
                        <view class="">分享朋友圈</view>
                    </view>
                </view>
                <view class="cancel" @click="cancel">取消</view>
            </view>
        </view>
        <!-- 分享到朋友圈提示动画 -->
        <view class="to-timeline" v-else>
            <view class="bg" @click="hide"></view>
            <image src="../static/shareTip.png" mode="" class="share-tip"></image>
            <view class="share-text-tip">点击这里分享到朋友圈</view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'ShareMenu',
    data() {
        return {
            showToTimeline:false
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},

    methods: {
        cancel(){
            this.$emit('cancel')
        },
        // 分享
        share(type){
            if(type==='toTimeline'){
                this.showToTimeline=true;
            }
        },
        hide(){
            this.showToTimeline=false;
            this.$emit('cancel')
        }
    },
    watch: {},
    components: {},
};
</script>
<style lang="scss" scoped>
.share-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .to-friend,.to-timeline{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }
    .to-friend{
       .share-menu {
           position: absolute;
           left: 0;
           bottom: 0;
           width: 100%;
           display: flex;
           flex-direction: column;
           background: #fff;
           font-size: 22rpx;
       
           .theme {
               font-size: 32rpx;
               line-height: 32rpx;
       
               display: flex;
               justify-content: center;
               padding-top: 40rpx;
               padding-bottom: 40rpx;
           }
           image {
               width: 72rpx;
               height: 72rpx;
           }
           .cancel {
               width: 750rpx;
               height: 98rpx;
               background-color: #f6f6f6;
               display: flex;
               align-items: center;
               justify-content: center;
           }
           .share-btn{
               position: absolute;
               left: 0;
               top: 0;
               width: 100%;
               height: 100%;
               background: transparent;
               border: none;
               outline: none;
               margin: 0;
               padding: 0;
               &::after {
               	border: none;
               }
           }
       } 
    }
    
    .to-timeline{
        .share-tip {
            position: absolute;
            right: 152rpx;
            top: 20rpx;
            width: 114rpx;
            height: 208rpx;
            animation: move 2.5s linear infinite;
        }
        .share-text-tip{
            position: absolute;
            right: 80rpx;
            top: 254rpx;
            color: #fefefe;
            font-size: 32rpx;
            line-height: 32rpx;
        }
    }

    @keyframes move {
        0% {
            transform:translate(-20rpx,20rpx) ;
            opacity: 0;
        }
    
        40% {
            transform:translate(0,0) ;
            opacity: 1;
        }
        80% {
            transform:translate(-20rpx,20rpx) ;
            opacity: 0;
        }
        100% {
            transform:translate(-20rpx,20rpx) ;
            opacity: 0;
        }
    }

}
</style>
